import { useState } from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import classNames from 'classnames'
import styles from './index.less'
import CircleButton from './components/CircleButton'


export default function Index () {
  
  const [isClick, setIsClick] = useState(false)

  const handleClick = () => {
    setIsClick(!isClick)
  }

  const handlePageToSelf = () => {
    Taro.navigateTo({
      url: '/pages/user/index'
    })
  }

  return (
    <View className={styles.to}>
      <View className={styles['to-title']}>
        {
          !isClick ? (
            <CircleButton className={styles.self} onClick={handlePageToSelf}>
              我的
            </CircleButton>
          ) : null
        }
      </View>
      <View className={styles['to-do']}>
        <CircleButton 
          onClick={handleClick} 
          className={classNames(styles['to-do__top'], { [styles.clicked]: isClick })}
        >吃什么</CircleButton>
        <CircleButton 
          onClick={handleClick} 
          className={classNames(styles['to-do__bottom'], { [styles.clicked]: isClick })}
        >{ isClick ? '思考中' : '去哪儿' }</CircleButton>
      </View>
    </View>
  )
}
